﻿<!DOCTYPE html>
<html>
<head>
    <title>Test the tree element</title>
    <!-- 
    Application and page settings.
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache" />
    <!-- 
    Style sheets. 
    -->
    <link href="../Motion/User Interface/Fonts/Fonts.css" rel="stylesheet" type="text/css" />
    <link href="../Motion/User Interface/Framework/Tree/Tree.css" rel="stylesheet" type="text/css" />
    <!--  
    Application scripts.    
    -->
    <script src="../Motion/User Interface/Framework/Tree/Tree.js" type="text/ecmascript">        
    </script>
</head>
<body>
    <div style="-webkit-user-select: none;">
        <table cellpadding="0" cellspacing="0">
            <tr style="height: 23px;cursor: pointer;">
                <td>
                    <img src="../Motion/User Interface/Framework/Tree//MinusSign.png" />
                </td>
                <td>
                    <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                </td>
                <td>
                    <span style="margin-left: 3px;">Level 1</span>
                </td>
            </tr>
        </table>
        <div style="margin-left: 15px;">
            <table cellpadding="0" cellspacing="0">
                <tr style="height: 23px;">
                    <td>
                        <img src="../Motion/User Interface/Framework/Tree/PlusSign.png" />
                    </td>
                    <td>
                        <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                    </td>
                    <td>
                        <span style="margin-left: 3px; white-space:nowrap">Level 1.1 (this is a long long long lineeeeee)</span>
                    </td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0">
                <tr style="height: 23px;">
                    <td>
                        <img src="../Motion/User Interface/Framework/Tree//EmptySign.png" />
                    </td>
                    <td>
                        <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                    </td>
                    <td>
                        <span style="margin-left: 3px">Level 1.2</span>
                    </td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0">
                <tr style="height: 23px;">
                    <td>
                        <img src="../Motion/User Interface/Framework/Tree//MinusSign.png" />
                    </td>
                    <td>
                        <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                    </td>
                    <td>
                        <span style="margin-left: 3px">Level 1.3</span>
                    </td>
                </tr>
            </table>
            <div style="margin-left: 15px;">
                <table cellpadding="0" cellspacing="0">
                    <tr style="height: 23px;">
                        <td>
                            <img src="../Motion/User Interface/Framework/Tree//EmptySign.png" />
                        </td>
                        <td>
                            <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                        </td>
                        <td>
                            <span style="margin-left: 3px">Level 1.3.1</span>
                        </td>
                    </tr>
                </table>
                <table cellpadding="0" cellspacing="0">
                    <tr style="height: 23px;">
                        <td>
                            <img src="../Motion/User Interface/Framework/Tree//PlusSign.png" />
                        </td>
                        <td>
                            <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                        </td>
                        <td>
                            <span style="margin-left: 3px">Level 1.3.2</span>
                        </td>
                    </tr>
                </table>
                <table cellpadding="0" cellspacing="0">
                    <tr style="height: 23px;">
                        <td>
                            <img src="../Motion/User Interface/Framework/Tree//EmptySign.png" />
                        </td>
                        <td>
                            <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                        </td>
                        <td>
                            <span style="margin-left: 3px">Level 1.3.3</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <table cellpadding="0" cellspacing="0">
            <tr style="height: 23px;">
                <td>
                    <img src="../Motion/User Interface/Framework/Tree//EmptySign.png" />
                </td>
                <td>
                    <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                </td>
                <td>
                    <span style="margin-left: 3px">Level 2</span>
                </td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0">
            <tr style="height: 23px;">
                <td>
                    <img src="../Motion/User Interface/Framework/Tree//PlusSign.png" />
                </td>
                <td>
                    <img src="../Applications/Development Environment/Home/Graphics/folder.png" style="margin-left: 2px;" />
                </td>
                <td>
                    <span style="margin-left: 3px">Level 3</span>
                </td>
            </tr>
        </table>
    </div>
    <!-- Highlights -->
    <div style="background: url('../Motion/User Interface/Framework/Tree/Selected-Middle.png'); width: 200px; height: 23px; position: absolute; top: 0px;
        z-index: -1">
        <img src="../Motion/User Interface/Framework/Tree//Selected-Left.png" />
        <img src="../Motion/User Interface/Framework/Tree//Selected-Right.png" style="float: right">
    </div>
    <br />
    <div style="background: url('../Motion/User Interface/Framework/Tree/SelectedHover-Middle.png'); width: 200px; height: 23px; position: absolute; top: 46px;
        z-index: -1">
        <img src="../Motion/User Interface/Framework/Tree/SelectedHover-Left.png" />
        <img src="../Motion/User Interface/Framework/Tree/SelectedHover-Right.png" style="float: right">
    </div>
    <br />
    <div style="background: url('../Motion/User Interface/Framework/Tree/Hover-Middle.png'); width: 200px; height: 23px; position: absolute; top: 138px;
        z-index: -1">
        <img src="../Motion/User Interface/Framework/Tree/Hover-Left.png" />
        <img src="../Motion/User Interface/Framework/Tree/Hover-Right.png" style="float: right">
    </div>

</html>
